// 树组件
<template>
  <div class="v-eltree">
    <el-input v-if="hasInput"
              :placeholder="inputPlaceHolder"
              :clearable="clearable"
              :size="size"
              v-model="searchText"></el-input>
    <el-scrollbar>
      <el-tree :data="treeData"
               :empty-text="emptyText"
               :node-key="nodeKey"
               :props="defaultProp"
               :expand-on-click-node="expandOnClickNode"
               :default-expanded-keys="defaultExpandedKeys"
               :default-expand-all="defaultExpandAll"
               :show-checkbox="showCheckbox"
               :default-checked-keys="defaultCheckedKeys"
               :highlight-current="highlightCurrent"
               :check-on-click-node="checkOnClickNode"
               :check-strictly="checkStrictly"
               :icon-class="iconClass"
               :draggable="draggable"
               :lazy="lazy"
               :load="loadNode"
               :filter-node-method="filterMethod"
               :render-content="renderContent"
               @node-click="handleNodeClick"
               @check-change="handleCheckChange"
               ref="tree">
      </el-tree>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  name: 'VelTree',
  props: {
    hasInput: Boolean,
    inputPlaceHolder: String,
    clearable: Boolean,
    size: String,
    treeData: Array,
    emptyText: String,
    nodeKey: String,
    defaultProp: Object,
    expandOnClickNode: Boolean,
    defaultExpandedKeys: Array,
    defaultExpandAll: Boolean,
    showCheckbox: Boolean,
    defaultCheckedKeys: Array,
    highlightCurrent: Boolean,
    checkOnClickNode: Boolean,
    checkStrictly: Boolean,
    iconClass: String,
    draggable: Boolean,
    lazy: Boolean,
    hasRenderContent: Boolean,
    filterFields: String
  },
  data () {
    return {
      // 搜索框中的内容
      searchText: '',
    }
  },
  watch: {
    searchText (val) {
      this.$refs.tree.filter(val)
    }
  },
  computed: {
  },
  methods: {
    // 过滤树的数据 code 或者 title
    filterMethod (value, data) {
      if (!value) return true;
      if (this.filterFields.length > 0) {
        return data.title.indexOf(value) !== -1 || data.code.indexOf(value) !== -1;
      }
      return data.title.indexOf(value) !== -1;
    },
    // 懒加载数据
    loadNode (node, resolve) {
      this.$emit('loadNodeData', node, resolve)
    },
    // 节点点击事件
    handleNodeClick (data) {
      this.$emit('handleNodeClick', data)
    },
    // 选择的节点发生变化
    handleCheckChange (data, checked, indeterminate) {
      this.$emit('handleCheckChange', data, checked, indeterminate)
    },
    renderContent (h, { node, data, store }) {
      if (this.hasRenderContent) {
        return (
          <span class="custom-tree-node" style="flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;">
            <span>{node.data[this.defaultProp.label]}</span>
            <span>
              <el-button size="mini" type="text" on-click={() => this.append(data)}>新增</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>删除</el-button>
              <el-button size="mini" type="text" on-click={() => this.edit(node, data)}>修改</el-button>
            </span>
          </span>);
      } else {
        return (<span class="custom-tree-node" style="align-items: center;justify-content: space-between;font-size: 14px"><span>{node.data[this.defaultProp.label]}</span></span>);
      }
    },
    append (data) {
      this.$emit('append', data)
    },
    remove (node, data) {
      this.$emit('remove', node, data)
    },
    edit (node, data) {
      this.$emit('edit', node, data)
    }

  }
};
</script>
<style scoped>
</style>
